<template>
    <div class="sea-page-column">
        <div class="box flex-column-gap">
            <h5>文本框 - 基础设置</h5>

            <blockquote>
                <div>和按钮设计一样，大小、样式、颜色分离，三者搭配使用以适应各种场景；</div>
                <div>不过和按钮不同，输入框需要的样式没那么多，暂未引入 css 变量版本的代码；</div>
                <div>推荐封装成 vue 组件，以达到 el-input 类似效果；</div>
            </blockquote>

            <div>
                <input type="text" class="input input-small" style="max-width: 200px;">
                <button class="btn-small">click</button>
            </div>
            <div>
                <input type="text" class="input input-default" style="max-width: 200px;">
                <button class="btn-default">click</button>
            </div>
            <div>
                <input type="text" class="input input-large" style="max-width: 200px;">
                <button class="btn-large">click</button>
            </div>

            <input type="text" class="sea-input input-default" value="设计好样式后的效果">
        </div>

        <div class="flex-column-gap box">
            <h5>文本框 - 附带前后按钮</h5>

            <div class="input-group input-default">
                <div class="input-prefix">
                    <i class="fa fa-fw fa-arrow-up"></i>
                </div>
                <div class="input-wrapper">
                    <div class="input-prefix-inner">
                        <i class="fa fa-fw fa-calendar"></i>
                    </div>
                    <input class="" value="121323">
                    <div class="input-suffix-inner">
                        <i class="fa fa-fw fa-edit"></i>
                    </div>
                </div>
                <div class="input-suffix">
                    <i class="fa fa-fw fa-search"></i>
                </div>
            </div>

            <div class="input-group input-default">
                <div class="input-wrapper">
                    <input class="" value="121323">
                </div>
                <div class="input-suffix">
                    <i class="fa fa-fw fa-search"></i>
                </div>
            </div>


            <div class="input-group input-default">
                <div class="input-prefix">
                    <i class="fa fa-fw fa-arrow-up"></i>
                </div>
                <div class="input-wrapper">
                    <input class="" value="121323">
                </div>
            </div>
        </div>


        <div class="flex-column box">
            <h5>文本域</h5>
            <blockquote>
                <div>文本域虽然常用，但是样式简单，相对固定，没有预设扩展方案。</div>
                <div>如果需要新的样式，需要重新开始写。</div>
            </blockquote>
            <textarea class="textarea code block"></textarea>
        </div>

        <div class="flex-column-gap box">
            <blockquote>
                <div>隐藏边框的输入框</div>
                <div>通常情况下，显示为普通文本，鼠标悬浮、聚焦的时候，显示为输入框；</div>
                <div>查看页上，需要经常更新的字段，可以使用当前设计（账户名称、座右铭、电话号码等）；</div>
            </blockquote>
            <el-input clearable class="no-border" v-model="input1">
                <template #suffix><i class="fa fa-fw fa-edit"></i></template>
            </el-input>
        </div>

        <div class="flex-column-gap box">
            <blockquote>一些 el-form 扩展组件</blockquote>

            <el-form :model="form1" label-width="auto" style="max-width: 600px">
                <el-form-item label="Activity name">
                    <sea-select v-model="form1.select" :options="options"></sea-select>
                </el-form-item>
                <el-form-item label="Activity name">
                    <sea-radio v-model="form1.select" :options="options"></sea-radio>
                </el-form-item>
                <el-form-item label="Activity name">
                    <sea-checkbox-group v-model="form1.selects" :options="options"></sea-checkbox-group>
                </el-form-item>
                <el-form-item label="Activity name">
                    <sea-icon-uploader v-model="form1.icon"></sea-icon-uploader>
                </el-form-item>
                <el-form-item label="Activity name">
                    <sea-file-uploader v-model="form1.file" :limit="3"></sea-file-uploader>
                </el-form-item>
                <el-form-item label="Activity name">
                    <sea-select-tree :options="tree" v-model="form1.tree"></sea-select-tree>
                </el-form-item>
                <el-form-item label="Activity name">
                    <sea-tree-check :options="tree" v-model="form1.tree2"></sea-tree-check>
                </el-form-item>
            </el-form>
        </div>

        <div class="flex-column-gap box">
            <blockquote>标准的 el-form</blockquote>

            <el-form :model="form" label-width="auto" style="max-width: 600px">
                <el-form-item label="Activity name">
                    <el-input v-model="form.name"/>
                </el-form-item>
                <el-form-item label="Activity zone">
                    <el-select v-model="form.region" placeholder="please select your zone">
                        <el-option label="Zone one" value="shanghai"/>
                        <el-option label="Zone two" value="beijing"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="Activity time">
                    <el-col :span="11">
                        <el-date-picker v-model="form.date1" type="date" placeholder="Pick a date"
                                        style="width: 100%"/>
                    </el-col>
                    <el-col :span="2" class="text-center">
                        <span class="text-regular-500">-</span>
                    </el-col>
                    <el-col :span="11">
                        <el-time-picker v-model="form.date2" placeholder="Pick a time" style="width: 100%"/>
                    </el-col>
                </el-form-item>
                <el-form-item label="Instant delivery">
                    <el-switch v-model="form.delivery"/>
                </el-form-item>
                <el-form-item label="Activity type">
                    <el-checkbox-group v-model="form.type">
                        <el-checkbox value="Online activities" name="type">
                            Online activities
                        </el-checkbox>
                        <el-checkbox value="Promotion activities" name="type">
                            Promotion activities
                        </el-checkbox>
                        <el-checkbox value="Offline activities" name="type">
                            Offline activities
                        </el-checkbox>
                        <el-checkbox value="Simple brand exposure" name="type">
                            Simple brand exposure
                        </el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="Resources">
                    <el-radio-group v-model="form.resource">
                        <el-radio value="Sponsor">Sponsor</el-radio>
                        <el-radio value="Venue">Venue</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="Activity form">
                    <el-input v-model="form.desc" type="textarea"/>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">Create</el-button>
                    <el-button>Cancel</el-button>
                </el-form-item>
            </el-form>
        </div>

    </div>
</template>

<script lang="ts" setup>
import {reactive, ref} from 'vue'
import SeaSelect from "@/widget/form-item/sea-select.vue";
import Bamboo from "@/lang/bamboo";
import {Calendar,} from '@element-plus/icons-vue'
// do not use same name with ref
const form = reactive({
    name: '',
    region: '',
    date1: '',
    date2: '',
    delivery: false,
    type: [],
    resource: '',
    desc: '',
})


// do not use same name with ref
const form1 = reactive({
    date: '2016-05-03',
    name: '王小虎',
    icon: '',
    file: [],
    address: '上海市普陀区金沙江路 1516 弄',
    isDisabled: true,
    select: 1,
    tree: 1,
    tree2: [1],
    selects: [1],
    star: 3,
    image: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
})

const options = [
    {value: 1, label: '区域1', style: ''}
    , {value: 2, label: '区域2', style: ''}
    , {value: 3, label: '区域3', style: ''}
    , {value: 4, label: '区域4', style: ''}
];

const list = [
    {id: 1, label: '一级 1'}
    , {id: 4, pid: 1, label: '二级 1-1'}
    , {id: 9, pid: 4, label: '三级 1-1-1'}
    , {id: 2, pid: 4, label: '一级 2'}
];

const tree = Bamboo.toTree(list);

const onSubmit = () => {
    console.log('submit!')
}

const input1 = ref('sth.');
</script>